import React, { useCallback } from 'react';
import { Form, Input, Button, Space, Radio } from 'antd';
import styles from './index.less';

interface FormBoxProps {
  onFormSearch: (values: any) => void;
  onReset: () => void;
}

const FormBox: React.FC<FormBoxProps> = ({ onFormSearch, onReset }) => {
  const [form] = Form.useForm();

  const handleSubmit = useCallback(
    (values) => {
      onFormSearch(values);
    },
    [onFormSearch],
  );

  const handleReset = useCallback(() => {
    onReset();
    form.resetFields();
  }, [onReset, form]);

  return (
      <Form className={styles.form} form={form} layout="inline" onFinish={handleSubmit}>
        <Form.Item name="title" label="标题">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="is_on" label="是否上架">
          <Radio.Group>
            <Radio.Button value={1}>已上架</Radio.Button>
            <Radio.Button value={0}>未上架</Radio.Button>
          </Radio.Group>
        </Form.Item>
          <Form.Item className="radiostyle" name="is_recommend" label="是否推荐">
            <Radio.Group>
              <Radio.Button value={1}>已推荐</Radio.Button>
              <Radio.Button value={0}>未推荐</Radio.Button>
            </Radio.Group>
          </Form.Item>
        <Form.Item className="buttonStyle">
          <Space>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button htmlType="button" onClick={handleReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
  );
};

export default FormBox;
